<template>
  <div class="home-container">
    <div class="home-container">
      <el-container>
        <el-header>
          <div class="header-content">
            <span>评价管理系统</span>
            <div>
              <span class="welcome">欢迎, {{ currentUser.username }}</span>
              <el-button type="text" @click="logout">退出登录</el-button>
            </div>
          </div>
        </el-header>
        <el-main>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="提交评价" name="evaluation">
              <evaluation-form @submit-success="handleEvaluationSuccess" />
            </el-tab-pane>
            <el-tab-pane label="订单查询" name="orderCheck">
              <order-check />
            </el-tab-pane>
            <el-tab-pane label="订单列表" name="orderList">
              <order-list
                :evaluations="evaluations"
                @refresh="fetchEvaluations"
              />
            </el-tab-pane>
            <el-tab-pane label="发送邮件" name="sendEmail">
              <el-button type="primary" @click="showEmailDialog = true"
                >发送邮件</el-button
              >
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>

      <send-email-dialog
        :visible.sync="showEmailDialog"
        @submit="handleSendEmail"
      />
    </div>
  </div>
</template>
  
  <script>
import { mapGetters, mapActions } from "vuex";
import EvaluationForm from "@/components/EvaluationForm";
import OrderCheck from "@/components/OrderCheck";
import OrderList from "@/components/OrderList";
import SendEmailDialog from "@/components/SendEmailDialog";

export default {
  name: "Home",
  components: {
    EvaluationForm,
    OrderCheck,
    OrderList,
    SendEmailDialog,
  },
  data() {
    return {
      activeTab: "evaluation",
      showEmailDialog: false,
    };
  },
  computed: {
    // 正确使用 mapGetters
    ...mapGetters(["currentUser", "evaluations"]),
  },
  methods: {
    ...mapActions(["getEvaluations", "sendEmail"]),
    logout() {
      this.$store.dispatch("logout");
      this.$router.push("/login");
    },
    handleEvaluationSuccess() {
      this.getEvaluations();
      this.activeTab = "orderList";
    },

    handleSendEmail(emailData) {
      this.sendEmail(emailData)
        .then(() => {
          this.$message.success("邮件发送成功");
          this.showEmailDialog = false;
        })
        .catch((error) => {
          this.$message.error(error.response?.data?.message || "邮件发送失败");
        });
    },
    fetchEvaluations() {
      this.$store.dispatch("getEvaluations");
    },
  },
  created() {
    this.getEvaluations();
    this.fetchEvaluations();
  },
};
</script>